<template>
  <div class="from_login">
    <h3>登录车宜拍账号</h3>
    <div class="inp">
      <input type="text" class="userP" placeholder="请输入手机号" v-model="fromLogin.phone">
      <input type="password" class="userPass" name="" id="" placeholder="请输入6-16位密码" v-model="fromLogin.pass">
      <div class="Interlayer">
        <div class="automaticLogon" @click="() => {fromLogin.iShow = !fromLogin.iShow}">
          <i>
            <img v-if="fromLogin.iShow" src="../../../static/img/login/log_auto_unselected.png" alt="">
            <img v-if="!fromLogin.iShow" src="../../../static/img/login/log_auto_selected.png" alt="">
          </i>
          <span>自动登录</span>
        </div>
        <div class="modifyPassword">
          <router-link :to="{path:'modify'}" tag="span">
            <a href="#">忘记密码 ？</a>
          </router-link>
        </div>
      </div>
      <div class="err">
        <p>{{fromLogin.err}}</p>
      </div>
      <div class="loginBtn" @click="login">
        登 &nbsp; 录
      </div>
      <div class="register">
        <img src="../../../static/img/login/log_go_to_reg.png" alt="">
        <router-link :to="{path:'register'}" tag="span">
          <a href="#">立即注册</a>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      // 登录
      fromLogin: {
        iShow: false,
        err: '',
        phone: '',
        pass: ''
      }
    }
  },
  created: function () {
    this.gitStor()
  },
  methods: {
    setStor: function () {
      // 存入Storage
      var obj = {
        userName: this.fromLogin.phone,
        pass: this.fromLogin.pass
      }
      var use = JSON.stringify(obj)
      var storage = window.localStorage
      storage.setItem('WSKuse', use)
    },
    gitStor: function () {
      // 读取Storage
      var storage = window.localStorage
      var json = storage.getItem('WSKuse')
      if (!json) {
        return
      }
      var jsonObj = JSON.parse(json)
      var jsonObjName = jsonObj.userName
      var jsonObjPass = jsonObj.pass
      if (window.localStorage && jsonObjName && jsonObjPass) {
        this.fromLogin.phone = jsonObjName
        this.fromLogin.pass = jsonObjPass
        // this.login()
      }
      return jsonObj
    },
    // 登录按钮
    login: function (ev) {
      let oEvent = ev || event
      oEvent.stopPropagation()
      oEvent.preventDefault()
      // 验证输入的合法性
      let Verification = /^1(3|4|5|7|8)\d{9}$/
      if (!this.fromLogin.phone) {
        this.fromLogin.err = '请输入手机号'
        $('.userP').css('borderColor', '#ff6f3c')
      } else if (Verification.test(this.fromLogin.phone) === false) {
        this.fromLogin.err = '请输入有效的手机号码'
        $('.userP').css('borderColor', '#ff6f3c')
      } else {
        let reg = /^[A-Za-z0-9]{6,16}$/
        if (this.fromLogin.pass === '') {
          this.fromLogin.err = '请输入密码'
          $('.userPass').css('borderColor', '#ff6f3c')
        } else if (reg.test(this.fromLogin.pass) === false) {
          this.fromLogin.err = '账号或密码错误，请重新输入'
        } else {
          this.fromLogin.err = ''
          // 加密
          let password = this.$md5(this.fromLogin.pass)
          // 请求
          this.$http({
            url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/userLogin',
            params: {telphone: this.fromLogin.phone, password: password},
            headers: {'from': 'web'}
          }).then(r => {
            if (r.data.state !== 'SUCCESS') {
              this.fromLogin.err = r.data.message
            } else if (r.data.state === 'SUCCESS') {
              // 把用户信息保存到浏览器中
              let use = JSON.stringify(r)
              let storage = window.sessionStorage
              storage.setItem('WSKuserLis', use)
              // 读取浏览器中的URL
              let json = storage.getItem('WSKpathHerf')
              if (json !== '' && json) {
                let pathHerf = JSON.parse(json)
                window.location.href = pathHerf
                setTimeout(function () {
                  window.location.reload()
                }, 200)
                storage.setItem('WSKpathHerf', '')
              } else {
                this.$router.push({path: '/personal'})
              }
              if (!this.fromLogin.iShow) {
                this.setStor()
              }
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.from_login{
  float: right;
  width: 420px;
  height: 440px;
  background: #fff;
  margin-top: 76px;
  h3{
    padding-left: 20px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #e3e3e3;
  }
  .inp{
    width: 304px;
    margin: 28px auto 0;
    input{
      width: 288px;
      height: 44px;
      border: 1px solid #e3e3e3;
      font-size: 14px;
      color: #333;
      border-radius: 5px;
      padding-left: 16px;
      margin-bottom: 24px;
      &:hover{
        border-color: #ff6f3c;
      }
      &:focus{
        border-color: #ff6f3c;
      }
    }
    .Interlayer{
      overflow: hidden;
      .automaticLogon{
        cursor: pointer;
        float: left;
        span{
          font-size: 14px;
          color: #666;
        }
        img{
          vertical-align: -1px;
        }
      }
      .modifyPassword{
        float: right;
        cursor: pointer;
        color: #666;
        a{
          font-size: 14px;
          color:#666;
        }
      }
    }
    .err{
      height: 50px;
      font-size: 14px;
      color: #f51111;
      p{
        padding: 24px 0 0 3px;
      }
    }
    .loginBtn{
      cursor: pointer;
      width: 304px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      border-radius: 5px;
      background: #ff6f3c;
    }
    .register{
      cursor: pointer;
      a{
        font-size: 16px;
        color: #ff6f3c;
      }
      float: right;
      margin-top: 60px;
      img{
        vertical-align: -3px;
      }
    }
  }
}
</style>
